<template>
  <div class="nav-tab">
    <div class="arrow l" @click="onScroll(0)"><i class="el-icon-d-arrow-left"></i></div>
    <el-scrollbar ref="scrollbar">
      <ul ref="scrollul">
        <li
          v-for="(item, index) in navTabs"
          :key="index"
          :class="{ active: $route.path === item.path }"
        >
          <a href="javascript:;" @click="$router.push(item.path)">
            <span>{{ item.name }}</span>
            <i
              class="el-icon-close"
              @click.stop="delNavTab(item.path)"
              v-if="item.path !== '/home/survey'"
            ></i>
          </a>
        </li>
      </ul>
    </el-scrollbar>
    <div class="arrow r" @click="onScroll(1)"><i class="el-icon-d-arrow-right"></i></div>
  </div>
</template>

<script>
import { defineComponent, ref, computed, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const {proxy} = getCurrentInstance()
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    let scrollbar = ref(null), scrollul = ref(null)

    const onScroll = (n) => {
      console.log(proxy.$refs.scrollul);
      console.dir(proxy.$refs.scrollul);
    }

    return {
      scrollbar,
      scrollul,
      navTabs: computed(() => store.state.navTabs),
      onScroll,
      delNavTab(curPath) {
        store.commit("setNavTabs", curPath);
        if (curPath === route.path) {
          router.push(this.navTabs[this.navTabs.length - 1].path);
        }
      },
    };
  },
});
</script>

<style lang="scss" scoped>
.nav-tab {
  display: flex;
  .arrow {
    flex: 0 0 40px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
  }
  .arrow.l {
    border-right: 1px solid #f0f0f0;
  }
  .arrow.r {
    border-left: 1px solid #f0f0f0;
  }
  .arrow:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
  .el-scrollbar {
    flex: 1;
    height: 34px;
    ul {
      display: flex;
      height: 34px;
      li {
        flex-grow: 0;
        flex-shrink: 0;
        flex-wrap: nowrap;
        a {
          display: block;
          height: 100%;
          padding: 0 15px;
          line-height: 34px;
          font-size: 12px;
          i {
            margin-left: 10px;
          }
          i:hover {
            background-color: rgba(0, 0, 0, 0.2);
          }
        }
      }
      li.active {
        background-color: #39af88;
        a {
          color: #fff;
          i:hover {
            background-color: rgba(255, 255, 255, 0.2);
          }
        }
      }
    }
  }
}
</style>